<template>
  <div class="singer">
    <Scroll :list="singerList" :top="139" :bottom="30" ref="scroll">
      <div>
        <SingerCategory @category-click="getsingerList"></SingerCategory>
        <SingerList :singerList="singerList" @to-singer-detail="toSingerDetailPage" @img-load-end="imgLoadEnd"></SingerList>
      </div>
    </Scroll>
  </div>
</template>

<script>
  import SingerCategory from '@/components/main/singer/SingerCategory.vue'
  import SingerList from '@/components/main/singer/SingerList.vue'
  import Scroll from '@/components/scroll'
  export default {
    data() {
      return {
        //歌手列表
        singerList: []
      }
    },
    inject:['reloadRouter'],
    components: {
      SingerCategory,
      SingerList,
      Scroll
    },
    created() {
      this.getsingerList()
    },
    methods: {
      //获取歌手列表
      async getsingerList(params) {
        const { data: res } = await this.$http.get('/artist/list',{ params })
        this.singerList = res.artists
      },
      async toSingerDetailPage(id) {
        this.$router.push({path:'/singerdetail',query: {id}})
        this.reloadRouter()
      },
      imgLoadEnd(){
        this.$nextTick(() => {
          this.$refs.scroll.refresh()
        })
      }
    },
    watch: {
      singerCategoryObj() {
        this.$nextTick(() => {
          this.$refs.scroll.refresh()
        })
      }
    }
  }
</script>

<style>
</style>
